<template>
  <div
    class="System"
    v-loading="loading"
    :element-loading-text="$t('Home_networkFail')"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div v-if="System">
      <div class="title">
        <h2>{{ $t("Home_Host") }}</h2>
        <p>
          <span class="bt">{{ $t("Home_Hardware") }}</span>
          local
          <span class="iconfont icon-CPU"></span>
          {{ System.NCPU }}
          <span class="iconfont icon-neicuntiao"></span>
          {{ Math.round(System.MemTotal / 100000000) / 10 }} GB - Standalone
          {{ System.ServerVersion }}
        </p>
        <p>
          <span class="bt">{{ $t("Home_Root") }}</span
          >{{ System.DockerRootDir }}
        </p>
        <p>
          <span class="bt">{{ $t("Home_System") }}</span
          >{{ System.OperatingSystem }}
        </p>
      </div>
      <ul>
        <li
          v-for="item in limitNavList"
          :key="item.link"
          class="item"
          @click="toLink(item.link)"
        >
          <div class="icon">
            <span :class="item.icon"></span>
          </div>
          <div class="content">
            <p>{{ num(item.id) }}</p>
            <p>{{ $t(item.key) }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import post from "@/utils/post";
import navList from '@/router/navList'
export default {
  data() {
    return {
      System: null,
      netNum: 0,
      volumeNum: 0,
      loading: true,
    };
  },
  computed:{
    limitNavList(){
      if(navList){
       return navList.filter(item=>item.id > 1 && item.id < 6)
      }else{
        return []
      }
    },
  },
  mounted() {
    console.log(localStorage.getItem('token'))
    const docker =
      'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/info"'; // 请求系统相关数据
    post(
      { docker },
      (res) => {
        this.loading = false;
        this.System = res
      },
      this
    );
    const docker1 =
      'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/networks"'; // 网络列表
    post(
      { docker: docker1 },
      (res) => {
        this.netNum = res.length;
      },
      this
    );
    const docker2 =
      'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/volumes"'; // 查询卷列表
    post(
      { docker: docker2 },
      (res) => {
        this.volumeNum = res.Volumes.length;
      },
      this
    );
  },
  methods: {
    toLink(path) {
      this.$router.push(path);
    },
    num(value) {
      let num;
      switch(value){
        case '2':{
          num = this.System.Containers;
          break;
        }
        case '3':{
          num = this.System.Images;
          break
        }
        case '5':{
          num = this.netNum;
          break
        }
        case '4':{
          num = this.volumeNum;
          break
        }
        default :{
          num = 'Null';
          break
        }
      }
      return num;
    },
  },
};
</script>

<style lang="scss" scoped>
.System {
  min-height: 400px;
  .title {
    border: 1px solid rgb(236, 236, 236);
    h2 {
      font-size: 16px;
      line-height: 30px;
      padding: 10px 15px;
      background: #f2f2f2;
      font-family: "微软雅黑";
    }
    p {
      font-size: 13px;
      border-top: 1px solid rgb(236, 236, 236);
      padding: 15px;
      color: #333;
      .bt {
        width: 25%;
        display: inline-block;
      }
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      width: 48%;
      border: 1px solid #f2f2f2;
      background: #f2f2f2;
      margin-top: 28px;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 5px;
      .icon {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: #067fb5;
        line-height: 65px;
        text-align: center;
        color: #fff;
        margin-right: 15px;
        .iconfont {
          font-size: 30px !important;
        }
      }
      .content {
        p {
          color: #2361ae;
        }
        p:nth-child(1) {
          font-size: 28px;
        }
        p:nth-child(2) {
          font-size: 14px;
        }
      }
    }
    .none {
      display: none;
    }
  }
}
</style>
